vanilla js [CPU ToyProj] 니꼴라스 크롬 앱 만들기 ➕ 게임도 만들 수 있다. ➕ socket.io로 채팅 기능을 구현할 수 있다. ✔ 변수를 통해서 변하는 변수인지 변하지 않는 변수인지 알 수 있다. ✔ property를 가진 데이터를 정리할 수 있다. ✔ object 안에 function을 넣어줄 수 있다. 💚 The Document Object & HTML in JavaScript document.title 제목을 가져올 수 있다. 1.... JavaScriptvanilla jsjs도전CSSfrontend동아리htmlCSS [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS 20 web projects by VanillaJS - 1,2,3 모던 자바스크립트 책으로 이론을 공부하며, 이론만 공부하는것보다 이걸 활용하면 학습효과가 배가 되지않을까라는 생각중에 udemy에서 이 강의를 발견하였고 현재 수강중에 있다. cf) substring(a,b) : charAt은 문자 하나를 읽어내지만 substring 문자열을 읽어낸다. substring(1,3)- 1번 인덱스부터 3번인덱스까지의 문자열을 불러옴 3) slice() slice... JavaScriptvanilla jsJavaScript [Vanilla JS] ES6 문법 - 3 - 먼저 변수의 값을 초기화하고, i++ 증감문 때문에 변수가 1씩 증가하게되고, i<5; i가 5보다 작을 때까지 증가하며, 값이 같거나 크면 반복문을 빠져나오게 됩니다. (i<=5;가 되면 같을 때까지 증가하기 때문에 0 1 2 3 4 5가 출력됩니다.) 배열 안에 있는 아이템들의 데이터 타입은 상관없습니다. for of문은 배열 안에 있는 아이템들을 변수로 가져올 수 있습니다. 배열 안에 ... vanilla jsvanilla js 20 web projects by VanillaJS - 5, 6 이후에 좌측에 있는 버튼들을 통해 유저 추가, 유저의 돈 2배 증가, 백만장자만 보기, 분류, 계산 각각 map, filter, sort, reduce 함수를 사용하여 구현하였다. 3) 백만장자만 표시 1) async/await await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용 가능하며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해준다. await 키워드를 ... JavaScriptvanilla jsJavaScript [ Vanilla JS ] Flux 패턴으로 상태 관리하기 ( feat. store ) React에서 사용되는 상태관리 패턴이다. ( Redux, Context API ) 핵심은 동작이 단방향으로 흐르다. Action 상태를 변경하는 메소드. ( action key + payload ) Dispatcher action을 store에게 전달하는 역할. Model(Store) 상태을 관리하는 역할. View 화면을 렌더링하는 역할. Store core reducer Store을 생... 상태관리storeFluxvanilla jsFlux [Vanilla js] To Do List(할 일 수정기능) (이벤트 버블링) To Do List에서 입력된 할 일을 수정버튼을 이용해 수정하는 코드 구현 할 일의 수정 버튼을 누르면 prompt창이 뜸 prompt 인터페이스에서 할 일을 입력받고, 확인버튼을 누르면 할 일이 수정됨 이벤트 버블링 이벤트 버블링은 HTML의 특성으로 생기는 현상 부모를 클릭했을 때, 자식한테 이벤트가 발생 ex)팝업 바깥쪽을 클릭했을 때 팝업이 닫히는 경우 만약 ul > li > but... vanilla jsJavaScripttodo listJavaScript [Vanilla JS] 자라나는 나무 만들기 - 1 구현을 위해 큰 도화지를 하나 만들어야 한다. 도화지를 만들고 앱을 동작하기 위한 app.js를 만들고, 이 도화지 안에 여러 개의 나무가 그려지기 때문에 나무를 객체로 빼서 만들기 위한 tree.js를 만든다. 또한 각각의 나무(tree.js) 안에서 여러 개의 나뭇가지가 자라기 때문에 나뭇가지를 객체로 표현하기 위한 branch.js를 만든다. 우선 화면의 가운데에 나무를 하나 그려보자.... vanilla js아트웍vanilla js [Vanilla JS] 자라나는 나무 만들기 - 2 이번 편에선 클릭시 나무가 그려지는 이벤트와 아래에서부터 서서히 자라나는 효과를 구현해보자! 지금은 App에서 Tree 객체 하나가 자동으로 생성되면 Tree의 draw() 함수가 자동으로 실행되어 나무가 그려지게끔 동작하는데, 클릭 이벤트가 발생했을 때 App에서 Tree 객체가 생성되게 하면 된다. 화면을 클릭하면 클릭한 위치에 나무가 자라는 것을 볼 수 있다. 클릭시 나무가 자라는데, ... vanilla js아트웍vanilla js [Vanilla JS] : 시계/현재시간 노출 🍧 1. 설명 [기능] 단순히 현재 시간이 노출되도록 구현했다. Date함수를 사용하여 시간을 노출하고, setInterval을 사용하여 1초마다 시간을 가져오는 getClock함수를 호출하여 현재 시간에 해당하는 값이 1초단위로 변경하도록 한다. innerText로 HTML에 변경된 값을 넣어준다. 시간 값을 가져오면 삼항연산자를 사용하여 한자리 수일 때는 0을 붙여준다. (예 : 0:30... vanilla jsJavaScriptJavaScript [Vanilla JS] 🎮 반려동물 룰렛 미니게임 IT동아리 면접을 본 후 결과를 기다리는데, 갑자기 현타를 맞아 아무것도 하기가 싫었다. 생각이 들어 토요일에 면접을 본 뒤로 합불 결과가 나올 때까지 아무것도 하지 않았다. 심지어 다른 IT 동아리는 당장 화요일까지 마감이여서 쉴 시간도 없이 자소서부터 써야했었는데 그냥 포기하고 아무것도 하지 않았다. 여전히 코딩을 하기는 싫어서 딴짓만 하던 중, 언니가 갑자기 미래 남편 뽑기 같은 이상한... JavaScriptvanilla jsJavaScript
[CPU ToyProj] 니꼴라스 크롬 앱 만들기 ➕ 게임도 만들 수 있다. ➕ socket.io로 채팅 기능을 구현할 수 있다. ✔ 변수를 통해서 변하는 변수인지 변하지 않는 변수인지 알 수 있다. ✔ property를 가진 데이터를 정리할 수 있다. ✔ object 안에 function을 넣어줄 수 있다. 💚 The Document Object & HTML in JavaScript document.title 제목을 가져올 수 있다. 1.... JavaScriptvanilla jsjs도전CSSfrontend동아리htmlCSS [Javascript 30] 5. Flexbox + JS Image Gallery ✔ 참고 블로그 : ✔ 참고 공식 문서 : ✔ 참고 공식 문서 : ❗❗ 레이아웃 처럼 만들기 위해서 진행해야하는 과정 ❗❗ 1. 3개의 구역으로 나누어서 배경화면을 넣어준다. 2. 1개의 배경화면 구역에 text 3개를 1/3 위치에 넣어준다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있... CSSjavascript30wesBosfrontendvanilla jsJavaScriptjshtmlCSS 20 web projects by VanillaJS - 1,2,3 모던 자바스크립트 책으로 이론을 공부하며, 이론만 공부하는것보다 이걸 활용하면 학습효과가 배가 되지않을까라는 생각중에 udemy에서 이 강의를 발견하였고 현재 수강중에 있다. cf) substring(a,b) : charAt은 문자 하나를 읽어내지만 substring 문자열을 읽어낸다. substring(1,3)- 1번 인덱스부터 3번인덱스까지의 문자열을 불러옴 3) slice() slice... JavaScriptvanilla jsJavaScript [Vanilla JS] ES6 문법 - 3 - 먼저 변수의 값을 초기화하고, i++ 증감문 때문에 변수가 1씩 증가하게되고, i<5; i가 5보다 작을 때까지 증가하며, 값이 같거나 크면 반복문을 빠져나오게 됩니다. (i<=5;가 되면 같을 때까지 증가하기 때문에 0 1 2 3 4 5가 출력됩니다.) 배열 안에 있는 아이템들의 데이터 타입은 상관없습니다. for of문은 배열 안에 있는 아이템들을 변수로 가져올 수 있습니다. 배열 안에 ... vanilla jsvanilla js 20 web projects by VanillaJS - 5, 6 이후에 좌측에 있는 버튼들을 통해 유저 추가, 유저의 돈 2배 증가, 백만장자만 보기, 분류, 계산 각각 map, filter, sort, reduce 함수를 사용하여 구현하였다. 3) 백만장자만 표시 1) async/await await 키워드는 async 키워드가 붙어있는 함수 내부에서만 사용 가능하며 비동기 함수가 리턴하는 Promise로 부터 결과값을 추출해준다. await 키워드를 ... JavaScriptvanilla jsJavaScript [ Vanilla JS ] Flux 패턴으로 상태 관리하기 ( feat. store ) React에서 사용되는 상태관리 패턴이다. ( Redux, Context API ) 핵심은 동작이 단방향으로 흐르다. Action 상태를 변경하는 메소드. ( action key + payload ) Dispatcher action을 store에게 전달하는 역할. Model(Store) 상태을 관리하는 역할. View 화면을 렌더링하는 역할. Store core reducer Store을 생... 상태관리storeFluxvanilla jsFlux [Vanilla js] To Do List(할 일 수정기능) (이벤트 버블링) To Do List에서 입력된 할 일을 수정버튼을 이용해 수정하는 코드 구현 할 일의 수정 버튼을 누르면 prompt창이 뜸 prompt 인터페이스에서 할 일을 입력받고, 확인버튼을 누르면 할 일이 수정됨 이벤트 버블링 이벤트 버블링은 HTML의 특성으로 생기는 현상 부모를 클릭했을 때, 자식한테 이벤트가 발생 ex)팝업 바깥쪽을 클릭했을 때 팝업이 닫히는 경우 만약 ul > li > but... vanilla jsJavaScripttodo listJavaScript [Vanilla JS] 자라나는 나무 만들기 - 1 구현을 위해 큰 도화지를 하나 만들어야 한다. 도화지를 만들고 앱을 동작하기 위한 app.js를 만들고, 이 도화지 안에 여러 개의 나무가 그려지기 때문에 나무를 객체로 빼서 만들기 위한 tree.js를 만든다. 또한 각각의 나무(tree.js) 안에서 여러 개의 나뭇가지가 자라기 때문에 나뭇가지를 객체로 표현하기 위한 branch.js를 만든다. 우선 화면의 가운데에 나무를 하나 그려보자.... vanilla js아트웍vanilla js [Vanilla JS] 자라나는 나무 만들기 - 2 이번 편에선 클릭시 나무가 그려지는 이벤트와 아래에서부터 서서히 자라나는 효과를 구현해보자! 지금은 App에서 Tree 객체 하나가 자동으로 생성되면 Tree의 draw() 함수가 자동으로 실행되어 나무가 그려지게끔 동작하는데, 클릭 이벤트가 발생했을 때 App에서 Tree 객체가 생성되게 하면 된다. 화면을 클릭하면 클릭한 위치에 나무가 자라는 것을 볼 수 있다. 클릭시 나무가 자라는데, ... vanilla js아트웍vanilla js [Vanilla JS] : 시계/현재시간 노출 🍧 1. 설명 [기능] 단순히 현재 시간이 노출되도록 구현했다. Date함수를 사용하여 시간을 노출하고, setInterval을 사용하여 1초마다 시간을 가져오는 getClock함수를 호출하여 현재 시간에 해당하는 값이 1초단위로 변경하도록 한다. innerText로 HTML에 변경된 값을 넣어준다. 시간 값을 가져오면 삼항연산자를 사용하여 한자리 수일 때는 0을 붙여준다. (예 : 0:30... vanilla jsJavaScriptJavaScript [Vanilla JS] 🎮 반려동물 룰렛 미니게임 IT동아리 면접을 본 후 결과를 기다리는데, 갑자기 현타를 맞아 아무것도 하기가 싫었다. 생각이 들어 토요일에 면접을 본 뒤로 합불 결과가 나올 때까지 아무것도 하지 않았다. 심지어 다른 IT 동아리는 당장 화요일까지 마감이여서 쉴 시간도 없이 자소서부터 써야했었는데 그냥 포기하고 아무것도 하지 않았다. 여전히 코딩을 하기는 싫어서 딴짓만 하던 중, 언니가 갑자기 미래 남편 뽑기 같은 이상한... JavaScriptvanilla jsJavaScript